#{extends 'main.html' /}
#{set title:'Course overview' /}
#{set 'moreScripts'}
    <script src="@{'/public/javascripts/jquery.dataTables.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script>
        $(document).ready( function() {
            oTable = $('.courseTable').dataTable( {
            	"bSearchable": false,
            });
        });
    </script>
#{/set}

#{navigation /}

<div class="content">
	<h1>Course overview</h1>
	#{if user}
	<h2>Your Courses</h2>
	<div style="width: 80%; margin: auto">
	<table cellpadding="0" cellspacing="0" border="0" class="courseTable" id="yourCourseTable">
		<thead>
		<tr><th>Name</th><th>Room</th><th></th></tr>
		</thead>
		<tbody>
		#{list items:user.attendedCourses, as:'course'}
			<tr><td><a href="@{Courses.show(course.id)}">${course.name}</a></td><td>${course.room}</td><td><a href="@{Courses.leaveCourse(course.id)}">Remove from my courses</a></td></tr></li>
		#{/list}
		</tbody>
	</table>
	</div>
	<br>
	#{/if}
	
	<h2>Available Courses</h2>
	<div style="width: 80%; margin: auto">
	<table cellpadding="0" cellspacing="0" border="0" class="courseTable" id="courseTable">
		<thead>
		<tr><th>Name</th><th>Room</th><th></th></tr>
		</thead>
		<tbody>
		#{list courses, as:'course'}
			<tr><td><a href="@{Courses.show(course.id)}">${course.name}</a></td><td>${course.room}</td><td><a href="@{Courses.attendCourse(course.id)}">Add to my courses</a></td></tr></li>
		#{/list}
		</tbody>
	</table>
	</div>
</div>